<template>
  <div class="SideMenu" data-page="SideMenu">
    <div class="navbar-inner desktop-only">
      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        @select="handleSelect"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
      >
        <SideMenu :navMenus="leftMenus" v-on:menuav="menuav"></SideMenu>
      </el-menu>
    </div>
    <div class="menu-mobile">
      <div class="mobile-bot" :class="{'js-slide-right': jsright}">
        <i class="el-icon-setting icon-reorder" :label="zahn" @click="zhn"></i>
      </div>
      <div class="menu-mobile-conter" :class="{'block': mobileBode}">
        <div class="mobile-head-bg" @click="mobileHeadbg"></div>
        <el-menu
          default-active="0"
          class="menu-mobile-list"
          @select="menuSelected"
         background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router>
          <SideMenu :navMenus="leftMenus"></SideMenu>
        </el-menu>
      </div>
    </div>
  </div>
</template>
<script>
import "../assets/less/index.less";
import SideMenu from "../components/SideMenulist.vue";
export default {
  name: "home",
  components: {
    SideMenu
  },
  data() {
    return {
      isCollapse: false,
      leftMenus: [
        {
          entity: {
            id: 1,
            parentMenuId: 0,
            name: "systemManage",
            icon: "el-icon-message\r\n",
            alias: "系统管理",
            state: "ENABLE",
            sort: 0,
            value: null,
            type: "NONE",
            discription: "用于系统管理的菜单",
            createUserId: 1,
          },
          childs: [
            {
              entity: {
                id: 3,
                parentMenuId: 1,
                name: "authManage",
                icon: "el-icon-loading",
                alias: "权限管理",
                state: "ENABLE",
                sort: 0,
                value: "/ip",
                type: "LINK",
                discription: "用于权限管理的菜单",
                createUserId: 1,
                url:"/ip"
              },
              childs: null
            },
            {
              entity: {
                id: 4,
                parentMenuId: 1,
                name: "roleManage",
                icon: "el-icon-bell",
                alias: "角色管理",
                state: "ENABLE",
                sort: 1,
                value: "/system/role",
                type: "LINK",
                discription: "用于角色管理的菜单",
                createUserId: 1,
                url:""
              },
              childs: null
            },
            {
              entity: {
                id: 2,
                parentMenuId: 1,
                name: "menuManage",
                icon: "el-icon-edit",
                alias: "菜单管理",
                state: "ENABLE",
                sort: 2,
                value: "/system/menu",
                type: "LINK",
                discription: "用于菜单管理的菜单",
                createUserId: 1
              },
              childs: null
            },
            {
              entity: {
                id: 5,
                parentMenuId: 1,
                name: "groupManage",
                icon: "el-icon-mobile-phone\r\n",
                alias: "分组管理",
                state: "ENABLE",
                sort: 3,
                value: "/system/group",
                type: "LINK",
                discription: "用于分组管理的菜单",
                createUserId: 1
              },
              childs: null
            }
          ]
        },
        {
          entity: {
            id: 9,
            parentMenuId: 0,
            name: "contentManage",
            icon: "el-icon-rank",
            alias: "内容管理",
            state: "ENABLE",
            sort: 2,
            value: null,
            type: "NONE",
            discription: "用于内容管理的菜单",
            createUserId: 1
          },
          childs: [
            {
              entity: {
                id: 10,
                parentMenuId: 9,
                name: "classifyManage",
                icon: "el-icon-printer",
                alias: "分类管理",
                state: "ENABLE",
                sort: 0,
                value: "/content/classify",
                type: "LINK",
                discription: "用于分类管理的菜单",
                createUserId: 1
              },
              childs: null
            },
            {
              entity: {
                id: 11,
                parentMenuId: 9,
                name: "articleManage",
                icon: "el-icon-star-on",
                alias: "文章管理",
                state: "ENABLE",
                sort: 1,
                value: "/content/article",
                type: "LINK",
                discription: "用于文章管理的菜单",
                createUserId: 1
              },
              childs: null
            },
            {
              entity: {
                id: 12,
                parentMenuId: 9,
                name: "commentManage",
                icon: "el-icon-share",
                alias: "评论管理",
                state: "ENABLE",
                sort: 2,
                value: "/content/comment",
                type: "LINK",
                discription: "用于评论管理的菜单",
                createUserId: 1
              },
              childs:[{
                  entity: {
                    id: 14,
                    parentMenuId: 7,
                    name: "emailManage",
                    icon: "el-icon-sold-out\r\n",
                    alias: "邮箱管理",
                    state: "ENABLE",
                    sort: 3,
                    value: "/content/email",
                    type: "LINK",
                    discription: "用于邮箱管理的菜单",
                    createUserId: 1
                  },
                  // childs: null
                },
              ]
            }
          ]
        }
      ],
      activeIndex: "authManage",
      activeIndex2:"authManage",
      jsright: false,
      zahn: false,
      mobileBode: false
    };
  },
  created() {},
  mounted() {},
  methods: {
       menuav: function (menuav) {
        this.activeIndex = menuav
      },
    zhn() {
      let _this = this;
      if (_this.zahn) {
        _this.zahn = false;
        _this.jsright = false;
        _this.mobileBode = false;
      } else {
        _this.zahn = true;
        _this.jsright = true;
        _this.mobileBode = true;
      }
    },
    mobileHeadbg() {
      let _this = this;
      _this.mobileBode = false;
      _this.jsright = false;
      _this.zahn = false;
    },
    menuSelected() {
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    toggleClick() {
      //菜单展开功能
      this.isCollapse = !this.isCollapse;
    }
  }
};
</script>
<style lang='less'>
[data-page="SideMenu"] {
.menu-mobile-conter {
  display: none;
  width: 270px;
  height: 100%;
  position: absolute;
  z-index: 11;
  left: 0;
  top: 0;
  bottom: 0;
}
.el-menu--collapse {
  display: none;
}
.menu-mobile-list:not(.el-menu--collapse) {
  z-index: 11;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.block {
  display: block;
}
}
</style>
